<template>
  <q-menu dense square class="user-menu">
    <q-list dense style="min-width: 265px; font-size: 14px">
      <q-item
        clickable
        v-close-popup
        :to="{ name: 'ProfileHome' }"
        active-class="user-menu-list-item-active"
      >
        <q-item-section thumbnail>
          <q-avatar size="48px" round class="q-ma-sm">
            <img :src="currentUser.avatar" v-if="currentUser.avatar" />
            <q-icon v-else name="mdi-account" />
          </q-avatar>
        </q-item-section>
        <q-item-section>
          <q-item-label style="font-weight: bold; font-size: 18px">{{
            currentUser.name
          }}</q-item-label>
        </q-item-section>
      </q-item>
      <q-separator />
      <q-item
        clickable
        v-close-popup
        :to="{ name: 'MyContents' }"
        active-class="user-menu-list-item-active"
      >
        <q-item-section avatar class="icon">
          <q-icon name="mdi-play-box" />
        </q-item-section>
        <q-item-section>{{ $t('top.menu.myContent') }}</q-item-section>
      </q-item>
      <q-item
        clickable
        v-close-popup
        :to="{ name: 'Library' }"
        active-class="user-menu-list-item-active"
      >
        <q-item-section avatar class="icon">
          <q-icon name="layers" />
        </q-item-section>
        <q-item-section>{{ $t('top.menu.library') }}</q-item-section>
      </q-item>
      <q-item
        clickable
        v-close-popup
        active-class="user-menu-list-item-active"
        @click="showSettings"
      >
        <q-item-section avatar class="icon">
          <q-icon name="mdi-account-cog" />
        </q-item-section>
        <q-item-section>{{ $t('top.menu.manageAccount') }}</q-item-section>
      </q-item>
      <q-item
        clickable
        v-close-popup
        active-class="user-menu-list-item-active"
        @click="signout"
      >
        <q-item-section avatar class="icon">
          <q-icon name="mdi-login-variant" />
        </q-item-section>
        <q-item-section>{{ $t('common.signOut') }}</q-item-section>
      </q-item>
      <q-separator />
      <q-item clickable>
        <q-item-section avatar class="icon">
          <q-icon name="mdi-translate" />
        </q-item-section>
        <q-item-section>{{ $t('top.menu.language') }}</q-item-section>
        <q-item-section side>
          <q-icon name="keyboard_arrow_right" />
        </q-item-section>
        <q-menu auto-close anchor="center left" self="center right">
          <q-list dense>
            <q-item
              v-for="lang in languageConfig"
              :key="lang.code"
              clickable
              @click="changeLanguage(lang)"
            >
              <q-item-section>{{ lang.label }}</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-item>
      <q-item clickable v-close-popup active-class="user-menu-list-item-active">
        <q-item-section avatar class="icon">
          <q-icon name="mdi-earth" />
        </q-item-section>
        <q-item-section>{{ $t('top.menu.location') }}</q-item-section>
        <q-item-section side>
          <q-icon name="keyboard_arrow_right" />
        </q-item-section>
      </q-item>
      <q-item
        clickable
        v-close-popup
        :to="{ name: 'Settings' }"
        active-class="user-menu-list-item-active"
      >
        <q-item-section avatar class="icon">
          <q-icon name="mdi-cog" />
        </q-item-section>
        <q-item-section>{{ $t('top.menu.settings') }}</q-item-section>
      </q-item>
      <q-item clickable v-close-popup active-class="user-menu-list-item-active">
        <q-item-section avatar class="icon">
          <q-icon name="mdi-help-circle" />
        </q-item-section>
        <q-item-section>{{ $t('top.menu.help') }}</q-item-section>
      </q-item>
      <q-item clickable v-close-popup active-class="user-menu-list-item-active">
        <q-item-section avatar class="icon">
          <q-icon name="mdi-bug" />
        </q-item-section>
        <q-item-section>{{ $t('top.menu.feedback') }}</q-item-section>
      </q-item>
    </q-list>
  </q-menu>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useGlobalStore } from 'stores/global-store';
import { useUserStore } from 'stores/user-store';
import { storeToRefs } from 'pinia';
import Me from 'src/models/User';
import LanguageConfig from 'src/models/LanguageConfig';

const globalStore = useGlobalStore();
const { languageConfig } = storeToRefs(globalStore);
const userStore = useUserStore();
const currentUser = computed<Me>(() => userStore.currentUser as any);
function showSettings() {
  globalStore.showSettingDialog = true;
}
async function signout() {
  await userStore.signout();
  window.location.href = '/';
}
function changeLanguage(lang: LanguageConfig) {
  globalStore.setUILanguage(lang.code);
  // location.reload();
}
</script>
<style lang="scss">
.user-menu {
  border-radius: 11px;
  border: 1px solid #808080;
  .icon {
    padding: 0px;
    padding-right: 8px;
    min-width: 14px;
  }
  .user-menu-list-item-active {
    color: white;
  }
}
</style>
